<template>
  <div class="header">
    <div
      style="
        width: 200px;
        padding-left: 30px;
        font-weight: bold;
        color: #dbdbdb;
      "
    >
      学生宿舍管理系统
    </div>

    <div style="display: inline; margin-left: 60%;">
      <!-- <div class="loader">
        <div class="span"></div>
        <div class="span"></div>
        <div class="span"></div>
        <div class="span"></div>
        <div class="span"></div>
        <div class="span"></div>
        <div class="span"></div>
        <div class="span"></div>
      </div> -->
      <div class="list">
        <el-dropdown>
          <el-button plain>
            {{ username }} <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toInfo">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="exit">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      username: "",
    };
  },
  methods: {
    exit() {
      // console.log("111")
      // alert("nihaoa ");
      sessionStorage.removeItem("user");
      this.$router.push({ name: "Login" });
    },
    toInfo() {
      this.$router.push({ name: "SelfInfo" });
    },
  },
  created() {
    let user = sessionStorage.getItem("user");
    this.username = JSON.parse(user).name;
  },
};
</script>

<style scoped>
.header {
  height: 75px;
  line-height: 75px;
  border-bottom: 1px solid rgb(42, 167, 151, 0.1);
  display: flex;
  background-color: #2aa797;
}
.loader {
  float: left;
  margin: 0px 229px;
  padding-top: 14px;
}
.list {
  float: right;
  margin-left: 150px;
}
.loader .span {
  display: inline-block;
  width: 2em;
  height: 3em;
  background: #efe6b6;
  border-radius: 0.2em;
  transform: skewX(-30deg) scale(0);
  margin-left: 5px;
  filter: opacity(0);
  animation: animate 1s alternate infinite;
  animation-delay: calc(var(--n) * 0.2s);
}
@keyframes animate {
  to {
    filter: opacity(1);
    transform: skewX(-30deg) scale(1);
  }
}
.loader .span:nth-child(1) {
  --n: 1;
}
.loader .span:nth-child(2) {
  --n: 2;
}
.loader .span:nth-child(3) {
  --n: 3;
}
.loader .span:nth-child(4) {
  --n: 4;
}
.loader .span:nth-child(5) {
  --n: 5;
}
.loader .span:nth-child(6) {
  --n: 6;
}
.loader .span:nth-child(7) {
  --n: 7;
}
.loader .span:nth-child(8) {
  --n: 8;
}
</style>